<template>
	<view class="step_b_row">
		<view class="title"> 请选择训练经验 </view>
		<view class="action_exp_row">
			<view class="action_exp_item" v-for="(item, index) in colmouns" :key="item" @click="handleNextStep(index)">
				<view class="text">
					{{ item.text }}
				</view>
				<view class="content">
					{{ item.content }}
				</view>
				<view class="icon">
					<view class="tn-color-gray tn-icon-right"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colmouns: [{
						trainLevel: 0,
						text: "训练经验1年以下",
						content: "适合刚开始训练的新手",
					},
					{
						trainLevel: 1,
						text: "训练经验1-2年",
						content: "适合有一定训练基础的健身者",
					},
					{
						trainLevel: 2,
						text: "训练经验2年以上",
						content: "适合训练经验丰富的健身达人",
					},
				],
				// 当前选择的年限
				currentTrainLevel: null
			};
		},
		onLoad(option) {},
		methods: {
			// 下一步
			handleNextStep(index) {
				this.currentTrainLevel = index
				setTimeout(() => {
					this.$emit('nextStep')
				}, 100)
			},
			validateForm() {
				if (this.currentTrainLevel === null) {
					uni.showToast({
						title: '请选择训练经验',
						icon: 'none'
					})
					return false
				}
				return true
			},
			getFormData() {
				let {
					currentTrainLevel
				} = this
				let formData = {
					trainLevel: currentTrainLevel
				}
				return formData
			}
		},
	};
</script>

<style lang="less">
	.step_b_row {
		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin: 60rpx 0;
			margin-top: 0;
			color: #000;
		}

		.action_exp_row {
			margin-bottom: 50rpx;

			.action_exp_item {
				width: 100%;
				border-radius: 8px;
				border: 1px solid rgba(124, 124, 126, 0.2);
				padding: 50rpx 20rpx;
				margin-bottom: 30rpx;
				position: relative;

				.text {
					font-size: 40rpx;
					font-weight: 600;
				}

				.content {
					color: rgba(124, 124, 126, 1);
				}

				.icon {
					position: absolute;
					right: 50rpx;
					top: 50%;
					transform: translateY(-50%);

					.tn-color-gray {}

					.tn-icon-right {}
				}
			}
		}
	}
</style>